import React, { FC } from "react"
import { NodeProps, NodeToolbar, Position } from "@xyflow/react"
import { cn } from "@/lib/utils"
import { CustomNode } from "../type"
import NodeSelector from "../../node-selector"
import { getNodeTypeConfig } from "../node-type-config"
import useWorkflowStore from "@/stores/workflow"

/**
 * 自定义节点
 */
const Custom: FC<NodeProps<CustomNode>> = (props) => {
  const { data, selected } = props

  const isNodeToolbarVisible = useWorkflowStore((state) => state.isNodeToolbarVisible)
  const { ContentComponent } = getNodeTypeConfig(data.type)

  return (
    <>
      <NodeToolbar position={Position.Right} isVisible={isNodeToolbarVisible}>
        <NodeSelector />
      </NodeToolbar>
      <div
        className={cn(
          "w-[240px] py-3 px-2 bg-white rounded-xl border border-transparent shadow-md transition-all",
          selected ? "border-blue-600" : ""
        )}
      >
        <ContentComponent {...props} />
      </div>
    </>
  )
}

export default Custom
